<template>
	<view class="content">
		<view class="banner" auto-focus v-if="isReady">
			<view class="title-area">
				<text class="title-text">{{actObj.actTitle}}</text>
			</view>
		</view>
		<view class="article-meta" v-if="isReady">
			<text class="article-meta-text article-time">{{actObj.startTime}}</text>
			<text class="article-meta-text article-author">{{actObj.organizerName}}</text>
		</view>
		<view class="right-button" v-if="isReady">
			<view class="button-item">
				<u-button type="primary" :plain="true" text="关注" size="small" v-if="!isAttentionFlag"
					@click="anttentionAct"></u-button>
				<u-button type="primary" :plain="false" text="已关注" size="small" v-if="isAttentionFlag"
					@click="anttentionCancel"></u-button>
			</view>
		</view>
		<view class="article-content" v-if="isReady">
			<view class="act-content-text">
				<rich-text :nodes="actObj.actContent" style="font-size: 14px;"></rich-text>
			</view>
		</view>
		<view class="article-img">
			<view class="img-item" v-for="(item, index) in actImg" :key="index">
				<u--image :showLoading="true" :src="envURL+item.imgPath" :lazy-load="true" width="100%"></u--image>
			</view>
		</view>

		<view class="article-start-end-time" v-if="isReady">
			<view class="article-time-text article-startTime">
				<text class="article-time-text-title">活动开始时间：</text>
				{{actObj.startTime}}
			</view>
			<view class="article-time-text article-endTime">
				<text class="article-time-text-title">活动结束时间：</text>
				{{actObj.endTime}}
			</view>
			<u-divider text="End" lineColor="#474747"></u-divider>
		</view>

		<view class="article-button">
			<view class="right-button">
				<van-button plain type="info" size="small"
					v-if="actObj.organizerAccount === account && actObj.actType == '0' && actObj.signType=='1'"
					@click="positionClick" class="signButton">开启定位签到</van-button>
				<van-button plain type="info" size="small"
					v-if="actObj.organizerAccount !== account && actObj.actType == '0'" @click="signInClick"
					class="signButton">签到</van-button>
				<van-button plain type="info" size="small" v-if="actObj.actType == '1'" @click="uploadEntryClick"
					class="uploadEntry">提交参赛文件</van-button>

				<van-button plain type="info" size="small" @click="showFeedback=true">活动申诉</van-button>
			</view>
		</view>

		<van-dialog use-slot title="活动申诉" :show="showFeedback" show-cancel-button @confirm="postFeedback"
			@close="feedbackClose" confirm-button-color="#259ede">
			<view class="feedback-input">
				<u--textarea v-model="feedback" placeholder="请输入申诉内容"></u--textarea>
			</view>
		</van-dialog>

		<van-notify id="van-notify" />
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import Notify from '../../wxcomponents/@vant/weapp/notify/notify';
	import Toast from '../../wxcomponents/@vant/weapp/toast/toast';
	import {
		removeToken,
		getToken
	} from '@/utils/auth.js'
	import {
		getUserInfo,
		getACTDetailInfo,
		getACTImg,
		isAttention,
		attentionACT,
		cancelAttention,
		createFeedback,
		addLocation,
	} from '@/config/api.js';

	import {
		envURL,
	} from '@/utils/env.js'
	import {
		formatDate
	} from '@/utils/formateDate.js'

	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'

	export default {
		data() {
			return {
				envURL: envURL,
				actId: '',
				actObj: {},
				actImg: [],
				isAttentionFlag: 0,
				isReady: false,
				isLogined: false,
				showFeedback: false,
				feedback: ''
			}
		},
		computed: {
			...mapGetters([
				'name',
				'account'
			])
		},
		methods: {
			...mapActions(['setInfo']),
			// 获取活动详细信息
			async getACTDataFn() {
				const res = await getACTDetailInfo({
					params: {
						actId: this.actId
					}
				})
				this.actObj = res.data
				this.isReady = true
			},

			// 获取活动图片
			async getACTImgFn() {
				const res = await getACTImg({
					params: {
						actId: this.actId
					}
				})
				this.actImg = res.data
			},
			// 获取关注状态
			async isAttention() {
				const res = await isAttention({
					params: {
						actId: this.actId,
						userAccount: this.account
					}
				})
				this.isAttentionFlag = res.data
			},
			// 关注活动
			async anttentionAct() {
				const res = await attentionACT({
					actId: this.actId,
					userAccount: this.account
				})
				this.isAttentionFlag = !this.isAttentionFlag
			},
			// 取消关注
			async anttentionCancel() {
				const res = await cancelAttention({
					actId: this.actId,
					userAccount: this.account
				})
				this.isAttentionFlag = !this.isAttentionFlag
			},

			// setInfo
			async setInfoFn() {
				const infoRes = await getUserInfo()
				if (infoRes.code === 90008 || infoRes.code === 90014) {
					// 登录用户
					this.isLogined = false
				} else {
					this.setInfo(infoRes.data)
					this.isLogined = true
				}
			},

			async postFeedback() {
				const res = await createFeedback({
					userAccount: this.account,
					feedback: this.feedback,
					actId: this.actId
				})
				if (res.hasOk) {
					Notify({
						type: 'success',
						message: res.message
					});
				} else {
					Notify({
						type: 'danger',
						message: '提交失败，请稍后再试'
					});
				}
			},

			feedbackClose() {
				this.showFeedback = false
			},

			// 开启定位
			positionClick() {
				let that = this
				uni.chooseLocation({
					success: async function(res) {
						const addRes = await addLocation({
							actId: that.actId,
							userAccount: that.account,
							latitude: res.latitude,
							longitude: res.longitude,
							address: res.address,
							name: res.name
						})
						if (addRes.hasOk) {
							Notify({
								type: 'success',
								message: addRes.message
							});
						} else {
							Notify({
								type: 'warning',
								message: addRes.message
							});

						}
					}
				});
			},

			// 签到
			signInClick() {
				let that = this
				if (this.actObj.signType == '0') {
					// 为扫码签到
					uni.scanCode({
						success: function(res) {
							let resData = JSON.parse(res.result)
							uni.navigateTo({
								url: `${resData.url}?actId=${resData.actId}&signType=0`
							});
						}
					});
				} else if (this.actObj.signType == '1') {
					// 为定位签到
					uni.navigateTo({
						url: `/pages/sign/sign?actId=${that.actId}&signType=1`
					});
				}
			},

			// 提交参赛文件
			uploadEntryClick() {
				let that = this
				wx.chooseMessageFile({
					count: 10,
					type: 'all',
					success: res => {
						console.log(111);
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFiles
						console.log(tempFilePaths);
						uni.uploadFile({
							url: envURL + 'activity/submitEntry', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0].path,
							name: 'entry',
							header: {
								['x-token']: getToken(),
							},
							formData: {
								userAccount: that.account,
								actId: this.actId,
								signTime: formatDate()
							},
							success: async res => {
								// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态
								let data = JSON.parse(res.data);
								// 成功：获取到头像
								if (data.hasOk) {
									// 更新当前页面数据
									Toast.loading({
										message: '上传中...',
										forbidClick: true,
									});
									const userRes = await getUserInfo()
									Toast.success('上传成功');
								} else {
									Toast.fail(data.message);
								}
							}
						});
					}
				})
			}

		},

		async onShow() {
			await this.setInfoFn()
			this.getACTImgFn()
			this.getACTDataFn()
			if (this.isLogined) {
				this.isAttention()
			}
		},

		// 分享到微信聊天
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.actObj.actTitle, //分享的名称
				path: `/pages/activityDetail/activityDetail?actId=${this.actId}`,
				mpId: 'wx124f07619b319a90' //此处配置微信小程序的AppId
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '我分享了一个活动，快来看看：' + this.actObj.actTitle,
				type: 0,
				summary: '我分享了一个活动,快来看看!',
			}
		},
		onLoad: function(option) {
			this.actId = option.actId
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
		min-height: 100%;
	}

	.content {
		height: 100%;
		background-color: #e2effa;
	}

	/* #endif */

	.banner {
		flex-direction: row;
		overflow: hidden;
	}

	.title-area {
		padding: 20px 20px 10px 20px;
	}

	.title-text {
		font-size: 16px;
		font-weight: 700;
		line-height: 26px;
		lines: 2;
		color: #000;
		overflow: hidden;
	}

	.article-meta {
		display: flex;
		padding: 10px 15px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.article-meta-text {
		color: #3a3a3a;
	}

	.article-text {
		font-size: 12px;
		line-height: 25px;
		margin: 0 10px;
	}

	.article-author {
		font-size: 15px;
	}

	.article-time {
		font-size: 15px;
	}

	.right-button {
		display: flex;
		justify-content: flex-end;
		width: 100%;

		.button-item {
			width: 50px;
			padding: 10px 0;
			padding-right: 30px;
		}
	}

	.article-content {
		font-size: 15px;
		padding: 0 20px;
		margin-bottom: 15px;
		overflow: hidden;
	}

	.article-content {
		line-height: 1.8;
	}

	.article-img {
		padding: 20px;

		.img-item {
			margin-bottom: 20px;
		}
	}

	.article-start-end-time {
		padding: 0 20px;
		padding-bottom: 60px;

		.article-time-text {
			margin-bottom: 10px;
		}

		.article-time-text-title {
			font-weight: 700;
		}
	}

	.article-button {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 50px;
		border-top: 1px solid #ccc;
		background-color: #edf8fc;
		z-index: 999;

		.right-button {
			margin-right: 20px;

			.signButton {
				margin-right: 10px;
			}

			.uploadEntry {
				margin-right: 10px;
			}
		}
	}

	.feedback-input {
		padding: 6px 10px;
	}
</style>